<template>
  <div v-loading="loading">
    <a-form-model ref="coordinateForm" :rules="rules" :model="info" :labelCol="{ span: 3 }" :wrapperCol="{ span: 10 }">
      <a-form-model-item label="商城名称" prop="name">
        <a-input v-model="info.name" />
      </a-form-model-item>
      <a-form-model-item label="商城类目" prop="category_id">
        <a-select v-model="info.category_id">
          <a-select-option v-for="item in categoryInfo" :key="item.id" :value="item.id - 0">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="更换业务员" prop="category_id">
        <a-select v-model="info.salesman_id">
          <a-select-option v-for="item in salesmanList" :key="item.id" :value="item.id - 0">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="地区" prop="address_info">
        <Address v-model="info.address_info"></Address>
      </a-form-model-item>
      <a-form-model-item label="商城Logo" prop="logo">
        <cyyUploadImg
          @uploadSuccess="
            (e) => {
              info.logo = e.data
            }
          "
          @deleteImg="info.logo = ''"
          :imgSrc="info.logo"
          imgSizeText="100*100"
        >
        </cyyUploadImg>
      </a-form-model-item>
      <a-form-model-item label="有效期" prop="end_time">
        <a-date-picker v-model="info.cost_end_time" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>
      <a-form-model-item label="运营类型" prop="business_model" v-if="!info.prod_is_saas && !isDandianpu">
        <a-radio-group v-model="info.business_model">
          <a-radio v-if="!info.prod_is_shangmeng" :value="1">独立小程序</a-radio>
          <a-radio :value="2">平台运营</a-radio>
          <a-radio :value="3">当面付</a-radio>
          <a-radio :value="4">点餐</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否有独立小程序" prop="self_mini" v-if="isDandianpu && info.is_duli_store_auth">
        <a-radio-group v-model="info.self_mini">
          <a-radio :value="1">使用</a-radio>
          <a-radio :value="0">不使用</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="店铺权限控制" v-if="info.permission.length > 0 && info.business_model == 1">
        <a-tree
          :treeData="info.permission"
          :checkable="true"
          :selectable="false"
          :defaultCheckedKeys="info.store_permission"
          @check="onTreeCheck"
        ></a-tree>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin:0 0 40px 0;"/>
        <div style="display:flex;justify-content: center;">
          <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right:8px;"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>,

<script>
import { Address } from '@/components'
import { getStoreParams, setStoreParams, getCategoryInfo, salesmanList } from '@/api/store'
import SelectMap from '@/components/SelectMap/SelectMap'
import { cyyUploadImg } from '@/components/CyyUi'
import storage from 'store'

export default {
  name: 'SaasSettingOther',
  data () {
    return {
      loading: false,
      btnLoading: false,
      mapVisiable: false,
      selectedPermission: [],
      info: {
        name: '',
        logo: '',
        business_model: 1,
        self_mini: 0,
        category_id: '',
        permission: [],
        store_permission: [],
        cost_end_time: 0,
        salesman_id: 0
      },
      rules: {
        name: [{ required: true, message: '请输入商城名称', trigger: 'blur' }],
        logo: [{ required: true, message: '请选择商城Logo', trigger: 'blur' }],
        cost_end_time: [{ required: false, message: '请输入有效期', trigger: 'blur' }],
        business_model: [{ required: true, message: '请选择商城运营模式', trigger: 'change' }],
      },
      salesmanList: null
    }
  },
  components: {
    SelectMap,
    Address,
    cyyUploadImg
  },
  created () {
    this.getData()
    this.getCategoryInfo()
    this.getSalesmanList()
  },
  props: {
    storeId: {
      type: Number,
      default: 0
    },
    isSuperAdmin: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isDandianpu () {
      return storage.get('isDandianpu')
    },

  },
  methods: {
    getSalesmanList() {
      salesmanList().then((res) => {
        this.salesmanList = res.data.list || null
      })
    },
    onTreeCheck: function (checkedKeys, info) {
      this.selectedPermission = checkedKeys
      if (info.halfCheckedKeys.length > 0) {
        this.selectedPermission = this.selectedPermission.concat(info.halfCheckedKeys)
      }
    },
    getCategoryInfo: function () {
      getCategoryInfo({}).then((res) => {
        if (res.code == 0) {
          this.categoryInfo = res.data
        }
      })
    },
    getData: function () {
      this.loading = true
      getStoreParams({ storeId: this.storeId })
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data
            if (this.info.category_id == 0) {
              this.info.category_id = ''
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.$refs.coordinateForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.info.store_permission = this.selectedPermission
          setStoreParams({
            ...this.info,
            storeId: this.storeId
          })
            .then((res) => {
              if (res.code == 0) {
                if (this.category_index) {
                  this.info.category_name = this.categoryInfo[this.category_index].name
                }
                this.info.option = this.category_option
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
